<template>
    <div class="author-result">
      <PageHeader :showSearch="showSearch" :tag="tag" :options="authorOptions" :select="header_select" :input="input"></PageHeader>
      <div class="main-body">
  
        <div class="content-select-result">
          <el-row :gutter="0" v-if="total_hits!==0">
            <!-- <el-col :span="7"><div class="grid-content bg-purple" style="margin-right:50px">
              <span style="display:flex; margin-bottom:24px; margin-top:10px; font-size:16px; color: #A0A0A0">筛选</span>
              <el-card class="box-card">
                <div class="author-affiliation sub-block">
                  <div class="check-box-title">
                    <span>机构</span>
                  </div>
                  <el-checkbox-group v-for="o in aggregation.affiliations"
                                     :key="o"
                                     style="margin-bottom: 15px; text-align: left"
                                     @change="getAuthorRes"
                                     v-model="checkAffiliationList">
                    <el-checkbox :label=o.name>
                      <el-tooltip class="item" effect="dark" :content="o.name" placement="right">
                        <span>{{ o.name|ellipsis_30 }}&nbsp;({{ o.count }})</span>
                      </el-tooltip>
                    </el-checkbox>
                  </el-checkbox-group>
                </div>
  
              </el-card>
            </div>
            </el-col> -->
  
            <el-col :span="16"><div class="grid-content bg-purple">
              <!-- <div>
                <el-row>
                  <el-col span="17">
                    <span style="display:flex; font-size:16px; margin-top:10px;color: #A0A0A0">学者 ({{ total_hits_str }})</span>
                  </el-col>
                  <el-col span="2">
                    <div style="margin-top:10px">
                      <span style="font-size:16px;color: #A0A0A0">排序</span>
                    </div>
                  </el-col>
                  <el-col span="5">
                    <el-select v-model="sortValue"
                               placeholder="请选择"
                               style="float:right; height:30px; margin-bottom:5px"
                               @change="getAuthorRes">
                      <el-option
                          v-for="item in queue"
                          :key="item"
                          :label="item.label"
                          :value="item.value">
                      </el-option>
                    </el-select>
                  </el-col>
                </el-row>
              </div> -->
  
              <AuthorBlocks
                  :authors="authors"
                  :author_avatars="author_avatars"
              ></AuthorBlocks>
  
              <div>
                <el-row>
                  <el-col :span="5" style="text-align:right">
                    <div >
                      <span>每页</span>
                      <el-input-number style="width:100px; margin: 22px 15px 15px;" el-input-number v-model="size" controls-position="right" @change="handleSizeChange" :min="1" :max="20"></el-input-number>
                      <!-- height:34px; -->
                      <span>条</span>
                    </div>
                  </el-col>
                  <el-col :span="15">
                    <el-pagination layout="prev, pager, next, jumper"
                                   background
                                   :current-page="pageIdx"
                                   :page-size="size"
                                   :total="total_hits"
                                   @size-change="handleSizeChange"
                                   @current-change="handleCurrentChange"
                                   style="margin: 20px">
                    </el-pagination>
                  </el-col>
                </el-row>
              </div>
  
            </div></el-col>
          </el-row>
          <el-empty :image-size="200" description="暂无相关学者数据" v-else></el-empty>
        </div>
  
      </div>
    </div>
</template>
  
<script>
import AuthorBlocks from "../../components/AuthorBlocks2";
import pageHeader from "../../components/Header";
import qs from "qs";
import avatarApi from "../../utils/avatarApi";
export default {
name: "AuthorResult",
components: {pageHeader, AuthorBlocks},
mixins: [avatarApi],
data() {
    return {
    total_hits_str: '0',
    total_hits: 0,
    showSearch: true,
    tag: 'authorRes',
    header_select: 'name',
    authorOptions: [{
        value: 'name',
        label: '姓名'
    }, {
        value: 'affiliation',
        label: '机构'
    }],
    input: '',

    pageIdx: 1,
    size: 10,

    queue: [
        {
        value: 1,
        label: "按匹配程度递减"
        },
        {
        value: 3,
        label: "按文献数量递减"
        },
        {
        value: 4,
        label: "按文献数量递增"
        },
        {
        value: 5,
        label: "按被引次数递减"
        },
        {
        value: 6,
        label: "按被引次数递增"
        }
    ],
    sortValue: 1,

    authors: [
        {
          "affiliation_name": "Arizona State University",
          "author_id": "2736235158",
          "name": "Franklin",
          "main_areas": "Organic Chemistry, materials science",
          "fields": ["Organic Chemistry", "materials science"],
          "citation_count": 13,
          "paper_count": 1,
          "avatar": "https://i.loli.net/2021/11/13/39PJtQWi7nrHMXu.jpg"
        },
        {
          "affiliation_name": "Universidad Nacional Autonoma de México",
          "author_id": "2736235159",
          "name": "Franklin",
          "main_areas": "organic chemicals",
          "fields": ["organic chemicals"],
          "citation_count": 154,
          "paper_count": 12,
          "avatar": "https://i.loli.net/2021/11/13/39PJtQWi7nrHMXu.jpg"
        },
        {
          "affiliation_name":"University of Florida",
          "author_id": "2736235160",
          "name": "Franklin",
          "main_areas": "Computer Vision, Computer Graphics",
          "fields": ["Computer Vision", "Computer Graphics"],
          "citation_count": 1874,
          "paper_count": 162,
          "avatar": "https://i.loli.net/2021/11/13/39PJtQWi7nrHMXu.jpg"
        },
        {
          "affiliation_name": "Unknown",
          "author_id": "2736235161",
          "name": "Franklin",
          "main_areas": "Computer Vision, Computer Graphics",
          "fields": ["Computer Vision", "Computer Graphics"],
          "citation_count": 0,
          "paper_count": 0,
          "avatar": "https://i.loli.net/2021/11/13/39PJtQWi7nrHMXu.jpg"
        }
    ],
    author_avatars: [],

    aggregation: {
        areas: [
        {
            paper_count: 12,
            name: "Computer Vision"
        },
        {
            paper_count: 32,
            name: "Computer Graphics"
        },
        {
            paper_count: 12,
            name: "Computer Vision"
        },
        ],
        affiliations: [
        {
            "affiliation_id": "157773358",
            "citation_count": "2015885",
            "count": 3,
            "grid_id": "grid.12981.33",
            "id": "157773358",
            "iso_code": "CN",
            "name": "Sun Yat-sen University",
            "official_page": "http://www.sysu.edu.cn/",
            "paper_count": "140227",
            "rank": "7026",
            "wiki_page": "http://en.wikipedia.org/wiki/Sun_Yat-sen_University"
        },
        {
            "affiliation_id": "1304085615",
            "citation_count": "168111",
            "count": 2,
            "grid_id": "grid.474379.a",
            "id": "1304085615",
            "iso_code": "US",
            "name": "Nvidia",
            "official_page": "http://www.nvidia.com/",
            "paper_count": "7955",
            "rank": "9512",
            "wiki_page": "http://en.wikipedia.org/wiki/Nvidia"
        },
        {
            "affiliation_id": "149594827",
            "citation_count": "367935",
            "count": 2,
            "grid_id": "grid.440736.2",
            "id": "149594827",
            "iso_code": "CN",
            "name": "Xidian University",
            "official_page": "http://www.xidian.edu.cn/",
            "paper_count": "44656",
            "rank": "8429",
            "wiki_page": "http://en.wikipedia.org/wiki/Xidian_University"
        },
        ]
    },

    checkAreaList: [],
    checkAffiliationList: [],
    }
},

  created() {
    let _query = this.$route.query;
    let _search_key = Object.keys(_query)[0];
    let _search_value = _query[_search_key];

    this.header_select = _search_key;
    this.input = _search_value;

    this.getAuthorRes();
},
  beforeRouteEnter(to,from,next){
    if(from.path !== '/admin' && from.path !== '/applyDetail'){
      next('/')
    }
    else if(!sessionStorage.getItem('is_admin')){
      next('/admin')
    }
    else next()
  },
  beforeRouteLeave(to,from,next){
    if(to.path !== '/admin2' && to.path !== '/applyDetail' ){
      sessionStorage.removeItem('is_admin')
      next()
    }
    next()
  },
methods: {
    handleSizeChange(val) {
    this.size = val;
    this.getAuthorRes();
    },
    handleCurrentChange(val) {
    this.pageIdx = val;
    this.getAuthorRes();
    },

    getContactData() {
    var affiliations = [];
    for (let k = 0; k < this.checkAffiliationList.length; k++)
        for (let l = 0; l < this.aggregation.affiliations.length; l++)
        if (this.checkAffiliationList[k] === this.aggregation.affiliations[l].name)
            affiliations.push(this.aggregation.affiliations[l].affiliation_id);

    let data = {
        affiliation_name: this.input,
        author_name: this.input,
        sort_type: Math.ceil(this.sortValue/2)-1,
        sort_ascending: this.sortValue%2===0,
        page: this.pageIdx,
        size: this.size,
        affiliations: JSON.stringify(affiliations)
    };
    return qs.stringify(data);
    },
    // 方法需连接后端
    getAuthorRes() {
    let _loadingIns = this.$loading({fullscreen: true, text: '拼命加载中'});
    this.$axios({
        method: 'post',
        url: '/user/getCertificationList/',
        // data: this.getContactData()
    })
    .then(res => {
      console.log(res.data)
        _loadingIns.close();
        switch (res.data.code) {
        case 200:
            console.log(res.data)
            this.authors = res.data.certifications;
            this.total_hits = res.data.certifications.length;
            this.total_hits_str = res.data.certifications.length.toLocaleString();
            // this.aggregation = res.data.aggregation;
            if (res.data.total_hits === 10000)
            this.total_hits_str = "10000+";
            // 获取学者头像
            this.getAuthorAvatars();
            break;
        case 404:
            this.total_hits = 0;
            this.total_hits_str = '0';
            break;
        case 500:
            this.$message.error("系统发生错误，请联系管理员！");
            setTimeout(() => {
            this.$router.push("/");
            }, 1500);
            break;
        }
    })
    .catch(err => {
        console.log(err);
    })
    },
    getAuthorAvatars() {
    let author_ids = [];
    for (let i = 0; i < this.authors.length; i++)
        author_ids.push(this.authors[i].author_id);
    this.getAvatars(author_ids, this.author_avatars);
    }
},

filters: {
    ellipsis_30: function(value) {
    if (!value) return "";
    if (value.length > 30) {
        return value.slice(0,30) + "...";
    }
    return value;
    }
},
}
</script>

<style scoped>
.bg-purple{
  /* margin-left: 20%; */
  position: relative;
  margin: auto;
  left: 22%;
}

.content-select-result{
    position: relative;
    margin: auto;
    margin-top: 3%;
    /* left:10% */
    /* right: 20%; */
}

.author-result .main-body {
  padding: 0 40px 20px 80px;
  position: relative;
  margin: auto;
  margin-top: 3%;
  /* margin-left: 15%; */
  /* left:5% */
}

.author-result .header {
margin-bottom: 40px;
}

.author-result .box-card {
padding: 20px;
}

.author-result .box-card .sub-block {
margin-bottom: 20px;
position: relative;
margin: auto;
margin-left: 10%;
}

.author-result .box-card .check-box-title {
text-align: left;
font-size: 17px;
margin-bottom: 20px;
}

.author-result >>> .el-pager li{
width:40px;
height:40px;
padding: 7px;
}

.author-result >>> .el-pagination .btn-prev .el-icon{
font-size: 15px;
margin: 15px;
}

.author-result >>> .el-pagination .btn-next .el-icon{
font-size: 15px;
margin: 15px;
}

.author-result >>> .el-pagination__editor.el-input .el-input__inner {
height: 40px;
}

.author-result >>> .el-pagination__jump{
font-size: 15px;
}

.author-result .box-card .check-box-title {
text-align: left;
font-size: 17px;
margin-bottom: 20px;
}

</style>